<template>
  <pro-layout
    v-model:selectedKeys="baseState.selectedKeys"
    v-model:openKeys="baseState.openKeys"
    :loading="loading"
    :breadcrumb="{ routes: breadcrumb }"
    :collapsed-button-render="true"
    :menu-data="menuData"
    disable-content-margin
    style="min-height: 100vh"
    iconfont-url="//at.alicdn.com/t/font_2804900_2sp8hxw3ln8.js"
  >
    <template #menuHeaderRender>
      <router-link :to="{ path: '/' }">
        <img src="/logo.png" />
        <h1>chaos saas</h1>
      </router-link>
    </template>
    <Carousel style="width: 80vw" />
    <template #rightContentRender>
      <RightContent />
    </template>

    <router-view v-slot="{ Component }">
      <a-config-provider :locale="locale">
        <component :is="Component" />
      </a-config-provider>
    </router-view>
  </pro-layout>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
import { RouterLink, useRouter } from 'vue-router';
import type { RouteContextProps } from '@ant-design-vue/pro-layout';
import { clearMenuItem, getMenuData, ProLayout } from '@ant-design-vue/pro-layout';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');
const locale = ref(zhCN);

const loading = ref(false);
const router = useRouter();
const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));

const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
  selectedKeys: ['/welcome'],
  openKeys: [],
  childrenSelectedKeys: [],
  childrenOpenKeys: [],
  collapsed: false,
});
const breadcrumb = computed(() =>
  router.currentRoute.value.matched.concat().map(item => {
    return {
      path: item.path,
      icon: item.meta.icon,
      params: item.meta?.params,
      breadcrumbName: item.meta.title || '',
    };
  }),
);

watchEffect(() => {
  if (router.currentRoute) {
    const matched = router.currentRoute.value.matched.concat();
    baseState.selectedKeys = matched.filter(r => r.name !== 'index').map(r => r.path);
    baseState.childrenSelectedKeys = matched.filter(r => r.name !== 'index').map(r => r.path);
    baseState.childrenOpenKeys = matched
      .filter(r => r.path !== router.currentRoute.value.path)
      .map(r => r.path);
  }
});
</script>
